import React, { memo } from "react";
import PropTypes from "prop-types";
import { useLocation, useNavigate } from "react-router-dom";
import { TabBar } from "antd-mobile";

const NavLinkBar = memo((props) => {
  let location = useLocation();
  let navigate = useNavigate();
  let pathname = location.pathname;
  const navList = props.list.filter((v) => !v.hide);
  function handleActiveKey() {
    let index = pathname.indexOf("/", 1);
    if (index !== -1) {
      return pathname.slice(0, index);
    }
    return pathname;
  }

  return (
    <div>
      <TabBar
        onChange={(value) => {
          navigate(value);
        }}
        activeKey={handleActiveKey()}
      >
        {navList.map((v) => (
          <TabBar.Item
            key={v.path}
            title={v.title}
            icon={<i className={`iconfont icon-${v.path.slice(1)}`}></i>}
            selected={pathname.startsWith(v.path)}
            badge={v.badge}
          ></TabBar.Item>
        ))}
      </TabBar>
    </div>
  );
});

NavLinkBar.propTypes = {
  list: PropTypes.array.isRequired,
};

export default NavLinkBar;
